<template>
	<div class="p-4 sm:p-6 md:p-8" >
		<!-- 顶部栏，包含主题切换器 -->
		<header class="flex justify-between items-center">
			<h1
				class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white"
			>
				首页
			</h1>
			<ThemeSwitcher />
		</header>

		<!-- 内容区域 -->
		<main class="mt-8">
			<p class="text-base text-gray-600 dark:text-gray-400">
				这是一个同时支持响应式和主题切换的页面。
			</p>

			<!-- 响应式网格布局 -->
			<div
				class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6"
			>
				<!-- Card 1 -->
				<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
					<h3
						class="font-bold text-lg text-accent dark:text-blue-400"
					>
						卡片一
					</h3>
					<p class="mt-2 text-text-secondary">
						在小屏幕上，卡片是单列布局。在中等屏幕上是两列，大屏幕上是三列。
					</p>
				</div>
				<!-- Card 2 -->
				<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
					<h3
						class="font-bold text-lg text-accent dark:text-blue-400"
					>
						卡片二
					</h3>
					<p class="mt-2 text-text-secondary">
						卡片的背景和文字颜色会根据主题自动切换。
					</p>
				</div>
				<!-- Card 3 -->
				<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
					<h3
						class="font-bold text-lg text-accent dark:text-blue-400"
					>
						卡片三
					</h3>
					<p class="mt-2 text-text-secondary">这是第三张卡片。</p>
				</div>
			</div>
		</main>
	</div>
</template>

<script setup lang="ts">
// 记得导入你的主题切换组件
import ThemeSwitcher from "@/components/ThemeSwitcher.vue";
</script>
